<template>
	<view class="wrap">
		<u-navbar :custom-back="$back" :back-icon-color="navbar.titleColor" is-back :title="navbar.title"
			:background="navbar.background" :title-color="navbar.titleColor">
		</u-navbar>
		<view class="content">
			<uni-row class="uni-row">
				<uni-col :span="12">
					<view class="rows">
						<view class="name">来访日期：</view>
						<view class="value">{{form.visitDate}}</view>
					</view>
				</uni-col>
				<uni-col :span="12">
					<view class="rows">
						<view class="name">来访时间点：</view>
						<view class="value">{{form.visitTimePoint}}</view>
					</view>
				</uni-col>
			</uni-row>
			<uni-row class="uni-row">
				<uni-col :span="12">
					<view class="rows">
						<view class="name">来访人：</view>
						<view class="value">{{form.visitName}}</view>
					</view>
				</uni-col>
				<uni-col :span="12">
					<view class="rows">
						<view class="name">来访人电话：</view>
						<view class="value">{{form.visitPhone}}</view>
					</view>
				</uni-col>
			</uni-row>
			<uni-row class="uni-row">
				<uni-col :span="12">
					<view class="rows">
						<view class="name">来访事由：</view>
						<view class="value">{{form.visitSubjectMatter}}</view>
					</view>
				</uni-col>
			</uni-row>
			<uni-row class="uni-row">
				<uni-col :span="12">
					<view class="rows">
						<view class="name">被访人名称：</view>
						<view class="value">{{form.visitPersonName}}</view>
					</view>
				</uni-col>
				<uni-col :span="12">
					<view class="rows">
						<view class="name">被访人电话：</view>
						<view class="value">{{form.visitPersonPhone}}</view>
					</view>
				</uni-col>
				<uni-col :span="24">
					<view class="rows">
						<view class="name">拜访地址：</view>
						<view class="value">{{form.visitRoomName}}</view>
					</view>
				</uni-col>
			</uni-row>
			<u-gap :height="gapHeight" bg-color="#f2f4f8"></u-gap>
			<view class="rows">
				<view class="name">通行二维码：</view>
				<view class="value" @click="showImageQR">
					{{showApprovedQR(form)}}
					<image style="width: 200rpx; height: 200rpx; background-color: #eeeeee;" mode="aspectFill" :src="approvedQR">
					</image>
				</view>
				<view style="margin-top: 120rpx;">
					<button style="background-color: #00aa00;color: #fff;width: 100%;height: 80%;font-size: 30upx;"
							@click="baseH5Link(config.baseH5Url + '/visitorDetail.html?visitorInfoId=' + form.visitorInfoId)"
							>复制分享链接</button>
				</view>
				<view style="margin-left: -350rpx;margin-top: -300rpx;">
					<uni-popup ref="popupImageQR" :mask-click="false" >
						<view style="width: 600rpx; height: 600rpx;">
							<image style="width: 600rpx; height: 600rpx; background-color: #eeeeee;" mode="aspectFill" :src="approvedQR"/>
							<button @click="closeImageQR" style="width: 600rpx; height: 100rpx;">关闭</button>
						</view>
					</uni-popup>
<!-- 					<view style="margin-left: -100rpx;margin-top: -150rpx;;">
					</view> -->
				</view>
			</view>
			<view class="rows">
				<view class="name">访客人脸图片：</view>
				<view class="value" @click="showImage">
					<image style="width: 200rpx; height: 200rpx; background-color: #eeeeee;" mode="aspectFill" :src="config.baseUrl +'/visitor/visitorInfo/showVisitorFace/' + form.visitorFace">
					</image>
				</view>
				<view style="margin-left: -350rpx;margin-top: -600rpx;">
					<uni-popup ref="popupImageQR" :mask-click="false" >
						<view style="width: 600rpx; height: 600rpx;">
							<image style="width: 600rpx; height: 600rpx; background-color: #eeeeee;" mode="aspectFill" :src="approvedQR"/>
							<button @click="closeImageQR">关闭</button>
						</view>
					</uni-popup>
					<uni-popup ref="popupImage" :mask-click="false">
						<image style="width: 600rpx; height: 600rpx; background-color: #eeeeee;" mode="aspectFill" :src="config.baseUrl +'/visitor/visitorInfo/showVisitorFace/' + form.visitorFace"/>
						<button @click="closeImage">关闭</button>
					</uni-popup>
				</view>
			</view>
			<u-gap :height="gapHeight" bg-color="#f2f4f8"></u-gap>
			
			<uni-col :span="12">
				<view class="rows">
					<view class="name">到访人数：</view>
					<view class="value">{{form.visitorNumber}}</view>
				</view>
			</uni-col>
			<uni-col :span="12">
				<view class="rows">
					<view class="name">车牌号：</view>
					<view class="value">{{form.visitCarNo}}</view>
				</view>
			</uni-col>
			<uni-col :span="24">
				<view class="rows">
					<view class="name">访客身份证号：</view>
					<view class="value">{{form.visitorCardNo}}</view>
				</view>
			</uni-col>
			<uni-col :span="24">
				<view class="rows">
					<view class="name">可到访区域：</view>
					<view class="value">{{form.visitorRegionNames}}</view>
				</view>
			</uni-col>
			<uni-col :span="24">
				<view class="rows">
					<view class="name">状态：</view>
					<view class="value">
						<!-- 状态 -->
						<text v-for="item2,index in totalList" :key="item2.name" v-if="form.visitorInfoStatus == item2.value" :style="'background-color:' + item2.color + ';color:#FFF;padding: 10rpx;font-size: 25upx;'">{{item2.name}}</text>
					</view>
				</view>
			</uni-col>
			<uni-col :span="24" v-if="form.visitorInfoStatus == 3 || form.visitorInfoStatus == 6">
				<view class="rows">
					<view class="name">实际到访时间：</view>
					<view class="value">{{form.realityVisitTime}}</view>
				</view>
			</uni-col>
			<uni-col :span="24" v-if="form.visitorInfoStatus == 3 || form.visitorInfoStatus == 6">
				<view class="rows">
					<view class="name">实际到访位置：</view>
					<view class="value">{{form.realityVisitPosition}}</view>
				</view>
			</uni-col>
			<uni-col :span="24" v-if="form.visitorInfoStatus == 6">
				<view class="rows">
					<view class="name">实际离园时间：</view>
					<view class="value">{{form.realityLeaveTime}}</view>
				</view>
			</uni-col>
			<uni-col :span="24" v-if="form.visitorInfoStatus == 6">
				<view class="rows">
					<view class="name">实际离园位置：</view>
					<view class="value">{{form.realityLeavePosition}}</view>
				</view>
			</uni-col>
			<uni-col :span="24" v-if="form.visitorInfoStatus == 0">
				<view class="rows">
					<button style="background-color: #e9003e;color: #fff;width: 40%;height: 80%;font-size: 30upx;"
							@click="refuse(form)"
							>拒绝</button>
					<button style="background-color: #00aa00;color: #fff;width: 40%;height: 80%;font-size: 30upx;margin-left: 1%"
							@click="allow(form)"
							>通过</button>
				</view>
			</uni-col>
		</view>
		<view class="footer">
			<!-- <view @click="$back">返 回</view> -->
			<view @click="already" v-if="form.visitorInfoStatus == 2 && saoma == 1 && alreadyCheck">确认到访</view>
			<view @click="departure" v-if="form.visitorInfoStatus == 3 && saoma == 1 && departureCheck">确认离园</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				//头部标题配置
				navbar: {
					title: "访客预约记详情",
					background: {
						backgroundColor: '#2373FA',
					},
					titleColor: "#ffffff",
				},
				gapHeight: 10,
				condition: {},
				form: {},
				statusList:[
					{
						name: '未审核',
						value: 0
					},
					{
						name: '未通过',
						value: 1
					},
					{
						name: '待来访',
						value: 2
					},
					{
						name: '已来访',
						value: 3
					},
					{
						name: '未审过期',
						value: 4
					},
					{
						name: '已审过期',
						value: 5
					},
					{
						name: '已离园',
						value: 6
					},
				],
				totalList: [{
					name: '未审核',
					value: 0,
					valueNum: 0,
					color: '#FFAA01'
				}, {
					name: '未通过',
					value: 1,
					valueNum: 0,
					color: '#FF3939'
				}, {
					name: '待来访',
					value: 2,
					valueNum: 0,
					color: '#13B3FD'
				}, {
					name: '已来访',
					value: 3,
					valueNum: 0,
					color: '#469D50'
				}, {
					name: '未审过期',
					value: 4,
					valueNum: 0,
					color: '#505050'
				}, {
					name: '已审过期',
					value: 5,
					valueNum: 0,
					color: '#505050'
				}, {
					name: '已离园',
					value: 6,
					valueNum: 0,
					color: '#0055ff'
				}],
				popup: false,
				config: {},
				approvedQR: '',
				saoma: 0,
				alreadyCheck: false,
				departureCheck: false,
			};
		},
		onLoad(option) {
			
			this.config = this.vuex_config;
			console.log('this.config.baseUrl',this.config.baseUrl);
			if (option.visitorInfoId) {
				this.form.visitorInfoId = option.visitorInfoId
			}
			if (option.saoma) {
				this.saoma = option.saoma
			}
		},
		onShow() {
			this.initPermissions();
			this.getData();
		},
		methods: {
			// 初始化权限
			initPermissions(){
				this.alreadyCheck = false,
				this.departureCheck = false,
				this.$u.api.getInfo().then(res => {
					let permissions = res.permissions;
					for (var i = 0; i < permissions.length; i++) {
						let permission = permissions[i];
						if(permission == 'visitor:visitorInfo:already'){
							this.alreadyCheck = true;
						}
						if(permission == 'visitor:visitorInfo:departure'){
							this.departureCheck = true;
						}
					}
				})	
			},
			refuse(item) {
				// 调用审批不通过接口
				this.$u.api.visitor.refuse({'visitorInfoId':item.visitorInfoId}).then(async res => {
					console.log(res)
					uni.showToast({
						title: '操作成功',
						icon: 'success'
					});
					this.getData();
				})
			},
			allow(item) {
				// 调用审批通过接口
				this.$u.api.visitor.allow({'visitorInfoId':item.visitorInfoId}).then(async res => {
					console.log(res)
					uni.showToast({
						title: '操作成功',
						icon: 'success'
					});
					this.getData();
				})
			},
			returnBack(){
				uni.navigateBack({
				  delta: 1 // 返回的页面数，如果 delta 大于现有页面数，则返回到首页。
				});
			},
			baseH5Link(text){
				uni.setClipboardData({
							data: text,
							success: function() {
								console.log(text);
								uni.showToast({
									title: '复制成功',
									icon: 'success'
								});
							}
						});
			},
			getData() {
				this.$u.api.visitor.getVisitorInfo(this.form.visitorInfoId).then(async res => {
					console.log('getVisitorInfo' , res);
					this.form = res.data
				})
			},
			already() {
				console.log(this.form);
				this.$u.api.visitor.check({'visitorInfoId':this.form.visitorInfoId}).then(async resCheck => {
						if (resCheck.data) {
							if(resCheck.data.checkResult){
								if(resCheck.code == 200){
									// 调用到访接口确认用户到访
									this.$u.api.visitor.already({'visitorInfoId':this.form.visitorInfoId}).then(async res => {
										console.log(res)
										if(res.code != 500){
											uni.showToast({
												title: res.msg,
												icon: 'success',
											})
											setTimeout(() => {
												this.returnBack()
											}, 500);
										}else{
											uni.showToast({
												title: res.msg,
												icon: 'error',
											});
											setTimeout(() => {
												uni.navigateTo({
													url: `/subPages/visitor/sentryBox`
												})
											}, 300)
										}
									})
								}
							}else {
								uni.showToast({
									title: resCheck.data.msg,
									icon: 'error',
								})
							}
						}else {
							uni.showToast({
								title: resCheck.msg,
								icon: 'error',
							})
						}
				})
			},
			departure() {
				console.log(this.form);
				this.$u.api.visitor.check({'visitorInfoId':this.form.visitorInfoId}).then(async resCheck => {
						if (resCheck.data) {
							if(resCheck.data.checkResult){	
								if(resCheck.code == 200){
									// 调用到访接口确认用户离园
									this.$u.api.visitor.departure({'visitorInfoId':this.form.visitorInfoId}).then(async res => {
										console.log(res)
										if(res.code != 500){
											uni.showToast({
												title: res.msg,
												icon: 'success',
											})
											setTimeout(() => {
												this.returnBack()
											}, 500);
										}else{
											uni.showToast({
												title: res.msg,
												icon: 'error',
											});
											setTimeout(() => {
												uni.navigateTo({
													url: `/subPages/visitor/sentryBox`
												})
											}, 300)
										}
									})
								}
							}else {
								uni.showToast({
									title: resCheck.data.msg,
									icon: 'error',
								})
							}
						}else {
							uni.showToast({
								title: resCheck.msg,
								icon: 'error',
							})
						}
				})
			},
			showImageQR(){
				 this.$refs.popupImageQR.open('center')
			},
			closeImageQR() {
				this.$refs.popupImageQR.close()
			},
			showImage(){
				 this.$refs.popupImage.open('center')
			},
			closeImage() {
				this.$refs.popupImage.close()
			},
			showApprovedQR(item){
				// 调用到访接口确认用户到访
				this.$u.api.visitor.getApprovedQR({'visitorInfoId':item.visitorInfoId}).then(async res => {
					this.approvedQR = res.data.data;
				})
				return '';
			},
			showNameByStatus(status){
				for (var i = 0; i < this.statusList.length; i++) {
					if(this.statusList[i].value == status){
						return this.statusList[i].name;
					}
				}
				return status;
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #f2f4f8;
	}

	.wrap {
		padding-bottom: 100upx;
		overflow: hidden;

		/deep/.uni-section-header {
			display: none;
		}

		.content {
			.uni-row {
				background-color: #fff;
			}

			.uni-section {
				font-weight: 600;

				/deep/.uni-list-item__extra-text {
					font-size: 14px;
				}
			}

			.rows {
				display: flex;
				min-height: 80upx;
				background-color: #fff;
				padding: 20upx 0;
				word-break: break-all;

				.name {
					flex-shrink: 0;
					color: #030303;
					padding: 0 30upx;
					min-width: 120upx;
					font-weight: 600;
				}

				.value {
					color: #030303;

					&.text-area {
						min-height: 120upx;
					}
				}
			}
		}
	}

	.footer {
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 120upx;
		width: 100%;

		>view {
			border-right: 1px solid #CDCDCD;
			background-color: #eee;
			flex: 1;
			color: #252525;
			font-size: 50upx;
			font-weight: bold;
			text-align: center;
			height: 120upx;
			line-height: 120upx;

			&:last-child {
				border-right: none;
				color: #fff;
				background-color: #019FE6;
			}
		}
	}

	.popup {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.8);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
	}

	.popup image {
		max-width: 90%;
		max-height: 90%;
	}
</style>